<script setup>

import {
  getFloorAll,
  getFloosByBulidingId,
  addFloor,
  getFloorById, updateFloor, deleteFloorByid
} from '@/api/system/park/floor'

export default {
  data() {
    return {
      h1Name: "",
      bulidingId: "",
      queryParams: {},
      buildingfloor: [],
      flagName: "",
      addUpdateBulidingForm: {
        id: "",
        floorSerialnumber: '',
        floorName: '',
        floorRoomnumber: '',
        floorBuildingid: ""
      },
      addBulidingShowDialogVisible: false,
      rules: {
        floorSerialnumber: [
          {required: true, message: '请输入楼层编号', trigger: 'blur'},
        ], floorName: [
          {required: true, message: '请输入楼层名称', trigger: 'blur'},
        ], floorRoomnumber: [
          {required: true, message: '请输入总房间数', trigger: 'blur'},
        ]
      }
    }
  },
  created() {
    this.queryMethods();
    let that = this;
    that.bulidingId = that.$route.query.bulidingId;
    that.queryParams.bulidingId = that.$route.query.bulidingId;


    that.h1Name = that.$route.query.buildingName;
    that.addUpdateBulidingForm.floorBuildingid = that.$route.query.bulidingId;
    that.floorBuildingid = that.$route.query.bulidingId;
    console.log("楼栋跳转楼层:" + that.bulidingId)
    console.log("楼栋跳转楼层:" + that.h1Name)


    getFloosByBulidingId(that.bulidingId).then(function (data) {
      console.log(data)
      that.buildingfloor = data.data;
    })
  },
  methods: {
    //点击查询
    queryMethods() {
      let that = this;
      getFloorAll(this.queryParams).then(function (data) {
        that.buildingfloor = data.data;
      })
    },
    //重置
    resetQuery() {
      this.queryParams = [];
      this.resetForm("queryParams");
      this.queryMethods();
    },
    addBulidingShow() {
      this.addUpdateBulidingForm = {}
      this.addUpdateBulidingForm.floorBuildingid = this.bulidingId
      this.addBulidingShowDialogVisible = true;
    },
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addUpdateBulidingForm.id == "" || this.addUpdateBulidingForm.id == undefined) {

            addFloor(that.addUpdateBulidingForm).then(function (data) {
              if (data.code == 200) {
                that.$message.success("添加成功");
              } else {
                that.$message.error("添加失败")
              }
              that.addBulidingShowDialogVisible = false;
              that.queryMethods();
            })


          } else {
            console.log(">>>>  " + that.flagName)
            console.log(">>>>  " + that.addUpdateBulidingForm.floorName)
            updateFloor(this.addUpdateBulidingForm).then(function (data) {
              if (data.code == 200) {
                that.$message.success("修改成功");
              } else {
                that.$message.error("修改失败")
              }
              that.addBulidingShowDialogVisible = false;
              that.queryMethods();
            })

          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    updateFloorShow(id) {
      let that = this;
      that.addBulidingShowDialogVisible = true;
      getFloorById(id).then(function (data) {
        that.addUpdateBulidingForm = data.data;
        that.floorSerialnumber = that.addUpdateBulidingForm.floorSerialnumber;
      });
    },
    deleteBuliding(id) {
      let that = this;
      that.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFloorByid(id).then(function (data) {
          if (data.code == 200) {
            that.$message.success("删除成功");
          } else {
            that.$message.error("删除失败")
          }
          that.queryMethods();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    tiaoRoom(id, floorSerialnumber) {
      console.log("楼层跳转房间带的楼栋" + this.bulidingId)
      console.log("floorId" + id)
      this.$router.push({
        path: "/room",
        query: {
          "bulidingId": this.bulidingId,
          "floorId": id,
          "h1Name": this.h1Name,
          "floorSerialnumber": floorSerialnumber
        }
      })
    }

  }
}
</script>

<template>
  <div class="app-container">

    <el-button class="el-icon-back" @click="()=>{this.$router.push('/buliding')}">返回</el-button>
    <h1>{{ h1Name }}</h1>

    <el-form :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="楼层编号">
        <el-input
          v-model="queryParams.floorSerialnumber"
          placeholder="请输入楼层编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="楼层名称">
        <el-input
          v-model="queryParams.floorName"
          placeholder="请输入楼层名称"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryMethods()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-top:30px;margin-bottom: 30px" icon="el-icon-plus" @click="addBulidingShow">
      添加
    </el-button>
    <div class="parent-flex">
      <div v-for="item in buildingfloor" style="background-color:#f2f2f2;margin-bottom:20px ;margin-right: 20px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button style="font-size: 20px" type="text" @click="tiaoRoom(item.id,item.floorSerialnumber)">
              {{ item.floorName }}
            </el-button>
            <i class="el-icon-menu" style="float: right"></i>
          </div>
          <p>楼层编号: {{ item.floorSerialnumber }}</p>
          <p>楼层总房间数: {{ item.floorRoomnumber }}</p>
          <p>
            <el-tooltip content="修改">
              <i class="el-icon-edit" style="float: left" @click="updateFloorShow(item.id)"></i>
            </el-tooltip>
            <el-tooltip content="删除">
              <i class="el-icon-delete" style="float: right" @click="deleteBuliding(item.id)"></i>
            </el-tooltip>
            ·
          </p>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="添加楼层"
      :visible.sync="addBulidingShowDialogVisible"
      width="30%">
      <el-form :inline="true" :model="addUpdateBulidingForm" :rules="rules" ref="addUpdateBulidingForm"
               class="demo-form-inline">
        <el-form-item label="楼层编号" label-width="110px" prop="floorSerialnumber">
          <el-input v-model="addUpdateBulidingForm.floorSerialnumber" placeholder="请输入楼层编号"></el-input>
        </el-form-item>
        <el-form-item label="楼层名称" label-width="110px" prop="floorName">
          <el-input v-model="addUpdateBulidingForm.floorName" placeholder="请输入楼层名称"></el-input>
        </el-form-item>
        <el-form-item label="总房间数量" label-width="110px">
          <el-input v-model="addUpdateBulidingForm.floorRoomnumber" placeholder="请输入总房间数量"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addUpdateBulidingForm')">立即创建</el-button>
        <el-button @click="resetForm('addUpdateBulidingForm')">重置</el-button>
        <el-button @click="addBulidingShowDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.parent-flex {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.box-card {
  width: 300px;
  height: 210px;
}

</style>
